import React from 'react'
import moment from 'moment'
import { withRouter, Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { Table, DatePicker, Input } from 'antd'
import Search from 'component/common/Search'
import PopoverTitle from 'component/common/PopoverTitle'
import { WORK_STATUS_NAME, PAGE_SIZE, FORMAT_DATE } from 'common/config'
import { renderSelectByCfg, getTableColumn } from 'common/util'
import styles from './Ledger.styl'

const { RangePicker } = DatePicker

const workStatusOptions = Object.entries(WORK_STATUS_NAME).map(([k, v]) => ({ name: v, value: k }))

const WORK_FIELD = {
    workNo: 'id',
    workContent: 'workContent',
    equipmentLocation: 'equipmentLocation',
    workOwner: 'workOwner',
    workStatus: 'workStatus',
    planWorkStartTime: 'planWorkStartTime',
    planWorkStartTimeStart: 'planWorkStartTimeStart',
    planWorkStartTimeEnd: 'planWorkStartTimeEnd',
}

const selectProps = {
    allowClear: true,
    showSearch: true,
    placeholder: '全部',
    filterOption: (val, { props: { value, children } = {} }) =>
        (value && String(value).indexOf(val) > -1) || (children && String(children).indexOf(val) > -1),
}

class Issue extends React.Component {
    state={
        loading: false,
    }

    componentDidMount() {
        this.requestIssueList()
    }

    getSearchFields = () => [
        {
            style: { marginBottom: 20 },
            cols: [
                [WORK_FIELD.workNo, '工作票号', 8, <Input placeholder="全部" allowClear={true} />, { width: '100px' }],
                [WORK_FIELD.workContent, '工单内容', 8, <Input placeholder="全部" allowClear={true} />, { width: '100px' }],
                [WORK_FIELD.equipmentLocation, '设备功能位置', 8, <Input placeholder="全部" allowClear={true} />, { width: '100px' }],
            ],
        },
        {
            cols: [
                [WORK_FIELD.workOwner, '工作负责人', 8, <Input placeholder="全部" allowClear={true} />, { width: '100px' }],
                [WORK_FIELD.workStatus, '状态', 8, renderSelectByCfg(workStatusOptions, selectProps), { width: '100px' }],
                [WORK_FIELD.planWorkStartTime, '计划开始时间', 8, <RangePicker />, { width: '100px' }],
            ],
        },
    ]

    getColumns = () => [
        ['工作票号', WORK_FIELD.workNo, 140, val => <Link to={`/ledger/${val}`}>{val}</Link>],
        ['工作内容', WORK_FIELD.workContent, undefined, val => <PopoverTitle content={val}>{val}</PopoverTitle>, 'text-overflow'],
        ['设备功能位置', WORK_FIELD.equipmentLocation, 120],
        ['工作负责人', WORK_FIELD.workOwner, 120],
        ['状态', WORK_FIELD.workStatus, 140, status => <div>{WORK_STATUS_NAME[status]}</div>],
        ['计划开始时间', WORK_FIELD.planWorkStartTime, 160],
    ].map(col => getTableColumn(...col))

    searchParams={}

    handleSearch = (params = {}) => {
        Object.entries(params).forEach(([k, v]) => {
            if (v === undefined || (Array.isArray(v) && v.length === 0)) {
                delete params[k]
            } else if (k === WORK_FIELD.planWorkStartTime) {
                params[WORK_FIELD.planWorkStartTimeStart] = moment(v[0]).format(FORMAT_DATE)
                params[WORK_FIELD.planWorkStartTimeEnd] = moment(v[1]).format(FORMAT_DATE)
                delete params[k]
            }
        })
        this.searchParams = params
        this.requestIssueList(params)
    }

    requestIssueList = params => {
        const { dispatch } = this.props
        this.setState({ loading: true })
        dispatch('devops.list', params).then(res => {
            this.setState({ loading: false })
        })
    }

    render() {
        const { loading } = this.state
        const { list = [], match: { params: { projectId } } } = this.props
        const columns = this.getColumns(projectId)
        const searchFields = this.getSearchFields()
        return (
            <div className={styles.main}>
                <Search fields={searchFields} onSearch={this.handleSearch} />
                <Table
                    className={styles.table}
                    rowKey={WORK_FIELD.workNo}
                    columns={columns}
                    dataSource={list}
                    loading={loading}
                    pagination={{
                        showQuickJumper: true,
                        pageSize: PAGE_SIZE,
                    }}
                />
            </div>
        )
    }
}

export default withRouter(connect(state => ({
    ...state.app,
    ...state.devops,
}))(Issue))
